/*
  @Author: tcly861204
  @Email:  356671808@qq.com
  @Date:   2022/1/7 下午12:00:45
  @Last Modified by:   tcly861204
  @Last Modified time: 2022/1/7 下午12:00:45
  @Github: https://tcly861204.github.io
*/
$className:cui_checkbox;
.#{$className} {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
  margin-right: 0;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  &__input {
    cursor: pointer;
    outline: 0;
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
    position: relative;
    white-space: nowrap;
  }
  &__inner {
    display: inline-block;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    background-color: #FFF;
    z-index: 1;
    transition: border-color .25s cubic-bezier(.71,-.46,.29,1.46),
    background-color .25s cubic-bezier(.71,-.46,.29,1.46);
    &::after {
      box-sizing: content-box;
      content: "";
      border: 1px solid #FFF;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      -webkit-transition: -webkit-transform .15s ease-in .05s;
      transition: -webkit-transform .15s ease-in .05s;
      transition: transform .15s ease-in .05s;
      transition: transform .15s ease-in .05s,-webkit-transform .15s ease-in .05s;
      -webkit-transform-origin: center;
      transform-origin: center;
    }
  }
  &__input.is-checked .#{$className}__inner {
    background-color: #409EFF;
    border-color: #409EFF;
    &::after {
      -webkit-transform: rotate(45deg) scaleY(1);
      transform: rotate(45deg) scaleY(1);
    }
  }
  &__input.is-disabled .#{$className}__inner {
    background-color: #edf2fc;
    border-color: #DCDFE6;
    cursor: not-allowed;
  }
  &__original {
    opacity: 0;
    outline: 0;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }
}